<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<script src="jQuery/jquery.min.js"></script>
<link href="bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>

<!-- 按钮 -->
<button type="button" class="btn">原始按钮（平面）</button>
<button type="button" class="btn btn-default">默认无色按钮</button>
<button type="button" class="btn btn-primary">提交按钮</button>
<button type="button" class="btn btn-success">成功按钮-button</button>
<button type="button" class="btn btn-info">信息按钮</button>
<button type="button" class="btn btn-warning">警告按钮</button>
<button type="button" class="btn btn-danger">危险按钮</button>
<button type="button" class="btn btn-link">表现为链接的按钮</button>
<button type="button" class="btn btn-lg">大一点的按钮</button>
<button type="button" class="btn btn-default">默认无色按钮</button>
<button type="button" class="btn btn-sm">小一点的按钮</button>
<button type="button" class="btn btn-xs">最小的按钮</button>
<button type="button" class="btn btn-block">宽屏按钮</button>
<button type="button" class="btn active">激活状态下的按钮</buttton>
<button type="button" class="btn disabled">无效状态下的按钮</button>
<!-- 以下三个按钮的效果都是一样的 -->
<button type="button" class="btn disabled btn-danger btn-mini">发红包</button>
<button type="button" class="btn disabled btn-mini btn-danger">发红包</button>
<button type="button" class="btn btn-danger btn-mini disabled">发红包</button><br>


<!-- 表格 -->
<h4>基本表格--table</h4>
<table class="table">
  <thead>
    <th>缩略图</th><th>名称</th>
  </thead>
  <tbody>
    <tr><td><img width="20px" src="pictures/waterfall.jpg"/></td><td>瀑布</td></tr>
    <tr><td><img width="20px" src="pictures/doraemon.jpg"/></td><td>蓝胖子</td></tr>
    <tr><td><img width="20px" src="pictures/car.jpg"/></td><td>汽车</td></tr>
    <tr><td><img width="20px" src="pictures/cat.jpg"/></td><td>猫</td></tr>
  </tbody>
</table>

<h4>斑马线表格--table-striped</h4>
<table class="table table-striped">
  <thead>
    <th>缩略图</th><th>名称</th>
  </thead>
  <tbody>
    <tr><td><img width="20px" src="pictures/waterfall.jpg"/></td><td>瀑布</td></tr>
    <tr><td><img width="20px" src="pictures/doraemon.jpg"/></td><td>蓝胖子</td></tr>
    <tr><td><img width="20px" src="pictures/car.jpg"/></td><td>汽车</td></tr>
    <tr><td><img width="20px" src="pictures/cat.jpg"/></td><td>猫</td></tr>
  </tbody>
</table>

<h4>带边框的表格--table-bordered</h4>
<table class="table table-bordered">
  <thead>
    <th>缩略图</th><th>名称</th>
  </thead>
  <tbody>
    <tr><td><img width="20px" src="pictures/waterfall.jpg"/></td><td>瀑布</td></tr>
    <tr><td><img width="20px" src="pictures/doraemon.jpg"/></td><td>蓝胖子</td></tr>
    <tr><td><img width="20px" src="pictures/car.jpg"/></td><td>汽车</td></tr>
    <tr><td><img width="20px" src="pictures/cat.jpg"/></td><td>猫</td></tr>
  </tbody>
</table>

<h4>鼠标经过状态改变的表格--table-hover</h4>
<table class="table table-hover">
  <thead>
    <th>缩略图</th><th>名称</th>
  </thead>
  <tbody>
    <tr><td><img width="20px" src="pictures/waterfall.jpg"/></td><td>瀑布</td></tr>
    <tr><td><img width="20px" src="pictures/doraemon.jpg"/></td><td>蓝胖子</td></tr>
    <tr><td><img width="20px" src="pictures/car.jpg"/></td><td>汽车</td></tr>
    <tr><td><img width="20px" src="pictures/cat.jpg"/></td><td>猫</td></tr>
  </tbody>
</table>

<h4>紧凑的表格--table-condensed</h4>
<table class="table table-condensed">
  <thead>
    <th>缩略图</th><th>名称</th>
  </thead>
  <tbody>
    <tr><td><img width="20px" src="pictures/waterfall.jpg"/></td><td>瀑布</td></tr>
    <tr><td><img width="20px" src="pictures/doraemon.jpg"/></td><td>蓝胖子</td></tr>
    <tr><td><img width="20px" src="pictures/car.jpg"/></td><td>汽车</td></tr>
    <tr><td><img width="20px" src="pictures/cat.jpg"/></td><td>猫</td></tr>
  </tbody>
</table>

<h4>多状态整合的表格--tablestriped--tablebordered--table-hover--table-condensed</h4>
<table class="table table-striped table-bordered table-hover table-condensed">
  <thead>
    <th>缩略图</th><th>名称</th>
  </thead>
  <tbody>
    <tr><td><img width="20px" src="pictures/waterfall.jpg"/></td><td>瀑布</td></tr>
    <tr><td><img width="20px" src="pictures/doraemon.jpg"/></td><td>蓝胖子</td></tr>
    <tr><td><img width="20px" src="pictures/car.jpg"/></td><td>汽车</td></tr>
    <tr><td><img width="20px" src="pictures/cat.jpg"/></td><td>猫</td></tr>
  </tbody>
</table>

<h4>第一行警告样式，第二行被激活，第三行成功，第四行信息样式，第五行危险样式</h4>
<table class="table">
  <thead>
    <th>缩略图</th><th>名称</th>
  </thead>
  <tbody>
    <tr class="warning"><td><img width="20px" src="pictures/waterfall.jpg"/></td><td>瀑布</td></tr>
    <tr class="active"><td><img width="20px" src="pictures/doraemon.jpg"/></td><td>蓝胖子</td></tr>
    <tr class="success"><td><img width="20px" src="pictures/car.jpg"/></td><td>汽车</td></tr>
    <tr class="info"><td><img width="20px" src="pictures/cat.jpg"/></td><td>猫</td></tr>
    <tr class="danger"><td><img width="20px" src="pictures/cat.jpg"/></td><td>猫</td></tr>
  </tbody>
</table>
<br>


<!-- 图片 -->
<h4>圆角图片--img-rounded</h4>
<img src="pictures/waterfall.jpg" class="img-rounded">
<h4>圆形图片--img-circle</h4>
<img src="pictures/doraemon.jpg" class="img-circle">
<h4>缩略图片--imgthumbnail</h4>
<img src="pictures/cat.jpg" class="img-thumbnail">
<br>

<!-- 表单 -->
<h4>表单--form-control</h4>
<input type="text" class="form-control" value="文本框"><br>
<input type="password" class="form-control" value="密码"><br>
<textarea class="form-control">文本域</textarea><br>
<select class="form-control">
  <option>Java</option>
  <option>JavaScript</option>
</select>
<br><br>

<!-- 文本 -->
<h4>文本--text-*</h4>
<span class="text-muted">淡灰色文本，用于说明性文字</span><br>
<span class="text-primary">强调性文本</span><br>
<span class="text-success">操作成功文本</span><br>
<span class="text-info">提示信息文本</span><br>
<span class="text-warning">警告文本</span><br>
<span class="text-danger">危险文本</span><br>
<br>

<!-- 背景 -->
<h4>背景--bg-*</h4>
<p class="bg-primary">强调</p>
<p class="bg-success">操作成功的文字</p>
<p class="bg-info">提示性的文字</p>
<p class="bg-warning">警告性的文字</p>
<p class="bg-danger">危险性的文字</p>
<br><br>

<!-- 其他 -->
<h4>其他</h4>
<button type="button" class="close" aria-hidden="true">关闭按钮（去除右侧字符会丢失“X”号图标）&times;</button>
<span class="caret">三角形图标</span>
<div class="pull-left">文字浮动到左边</div>
<div class="pull-right">文字浮动到右边</div>
<div class="show">显示</div>
<div class="hidden">隐藏，位置不会被保留</div>
<div class="invisible">隐藏，位置会被保留</div>
<div class="show">显示</div>
<br><br>

<!-- 栅格布局 -->
<h4>栅格布局--container</h4>
<style>
  div.container div.row div{
    margin: 5px 0px;
    background-color: lightgray;
    border: 1px solid gray;
    text-align: center;
  }
</style>
<div class="container">
  <div class="row">
    <div class="col-xs-12">一共12列</div>
  </div>
</div>
<div class="container">
  <div class="row">
    <div class="col-xs-1">1列</div>
    <div class="col-xs-1">1列</div>
    <div class="col-xs-1">1列</div>
    <div class="col-xs-1">1列</div>
    <div class="col-xs-1">1列</div>
    <div class="col-xs-1">1列</div>
    <div class="col-xs-1">1列</div>
    <div class="col-xs-1">1列</div>
    <div class="col-xs-1">1列</div>
    <div class="col-xs-1">1列</div>
    <div class="col-xs-1">1列</div>
    <div class="col-xs-1">1列</div>
  </div>
</div>
<div class="container">
  <div class="row">
    <div class="col-xs-4">4列</div>
    <div class="col-xs-4">4列</div>
    <div class="col-xs-4">4列</div>
  </div>
</div>
<br><br>
<div class="container">
  <div class="row">
    <div class="col-xs-6">1/2</div>
    <div class="col-xs-6">1/2</div>
  </div>
</div>
<div class="container">
  <div class="row">
    <div class="col-xs-4">1/3</div>
    <div class="col-xs-4">1/3</div>
    <div class="col-xs-4">1/3</div>
  </div>
</div>
<div class="container">
  <div class="row">
    <div class="col-xs-3">1/4</div>
    <div class="col-xs-3">1/4</div>
    <div class="col-xs-3">1/4</div>
  </div>
</div>
<br><br>

<h4>超出部分会自动换行--container</h4>
<div class="container">
  <div class="row">
    <div class="col-xs-6">1/2</div>
    <div class="col-xs-6">1/2</div>
  </div>
</div>
<div class="container">
  <div class="row">
    <div class="col-xs-6">1/2</div>
    <div class="col-xs-8">2/3</div>
  </div>
</div>


<h4>一个字体图标--glyphicon-asterisk</h4>
<span class="glyphicon glyphicon-asterisk"></span><br>

<h4>字体图标设置颜色--glyphicon-asterisk--text-success</h4>
<span class="glyphicon glyphicon-asterisk text-success"></span><br>

<h4>字体图标加入超链接--glyphicon-asterisk</h4>
<a href="#nowhere">
  <span class="glyphicon glyphicon-asterisk"></span>链接
</a><br>

<h4>在按钮上添加字体图标--btn--glyphicon</h4>
<button class="btn btn-primary btn-xs">
  <span class="glyphicon glyphicon-asterisk"></span>最小按钮
</button>
<button class="btn btn-primary btn">
  <span class="glyphicon glyphicon-asterisk"></span>正常按钮
</button>
<br><br>

<h4>下拉菜单--dropdown</h4>
<div class="dropdown"> <!-- 下拉菜单 -->
  <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">localhost<span class="caret"></span> <!-- id 指向菜单数据来源 -->
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <!-- aria-labelledby 和下拉按钮中的 id 相对应 -->
    <li><a href="#">HTML</a></li>
    <li role="presentation"><a href="#">CSS</a></li>
  </ul>
</div>
<div style="height:100px"><div><br>

<h4>选项不可点击，添加选项分隔线，禁用项--dropdown</h4>
<div class="dropdown">
  <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">localhost<span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-lebelledby="dropdownMenu1">
    <li class="dropdown-header">不可点击</li>
    <li><a href="#">HTML</a></li>
    <li role="persentation" class="divider"></li> <!-- 分割线 -->
    <li role="presentation"><a href="#">CSS</a></li>
    <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">禁用无法点击</a></li> <!-- 禁用项 -->
  </ul>
</div>
<div style="height:150px"></div>
<br><br>

<h4>按钮组--btn-group</h4>
<div class="btn-group" role="group" aria-label="web">
  <button type="button" class="btn btn-default">HTML</button>
  <button type="button" class="btn btn-default">CSS</button>
  <button type="button" class="btn btn-default">JS</button>
</div>
<br><br>

<h4>按钮组尺寸--btn-group</h4>
<style>
  br{
    margin:20px;
  }
</style>
<div class="btn-group btn-group-lg" role="group" aria-label="web">
  <button type="button" class="btn btn-default">HTML</button>
  <button type="button" class="btn btn-default">CSS</button>
  <button type="button" class="btn btn-default">JS</button>
</div><br>
<div class="btn-group" role="group" aria-label="web">
  <button type="button" class="btn btn-default">HTML</button>
  <button type="button" class="btn btn-default">CSS</button>
  <button type="button" class="btn btn-default">JS</button>
</div><br>
<div class="btn-group btn-group-sm" role="group" aria-label="web">
  <button type="button" class="btn btn-default">HTML</button>
  <button type="button" class="btn btn-default">CSS</button>
  <button type="button" class="btn btn-default">JS</button>
</div><br>
<div class="btn-group btn-group-xs" role="group" aria-label="web">
  <button type="button" class="btn btn-default">HTML</button>
  <button type="button" class="btn btn-default">CSS</button>
  <button type="button" class="btn btn-default">JS</button>
</div>
<br><br>

<h4>工具栏--btn-toolbar</h4>
<div class="btn-toolbar" role="toolbar" aria-label="study">
  <div class="btn-group" role="group" aria-label="java">
    <button type="button" class="btn btn-default">初级</button>
    <button type="button" class="btn btn-default">中级</button>
    <button type="button" class="btn btn-default">高级</button>
  </div>
  <div class="btn-group" role="group" aria-label="web">
    <button type="button" class="btn btn-default">HTML</button>
    <button type="button" class="btn btn-default">CSS</button>
    <button type="button" class="btn btn-default">JS</button>
  </div>
  <div class="btn-group" role="group" aria-label="framework">
    <button type="button" class="btn btn-default">Hibernate</button>
    <button type="button" class="btn btn-default">Struts</button>
    <button type="button" class="btn btn-default">Spring</button>
  </div>
</div>
<br><br>


<h4>垂直排列按钮--btn-group-vertical</h4>
<div class="btn-group-vertical" role="group" aria-label="web">
  <button type="button" class="btn btn-default">HTML</button>
  <button type="button" class="btn btn-default">CSS</button>
  <button type="button" class="btn btn-default">JS</button>
</div><br><br>


<h4>复选按钮--btn-group</h4>
<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-default active">
    <input type="checkbox" checked>HTML（默认选中）
  </label>
  <label class="btn btn-default">
    <input type="checkbox">CSS
  </label>
  <label class="btn btn-default">
    <input type="checkbox">JS
  </label>
</div><br><br>


<h4>单选按钮--btn-group</h4>
<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-default active">
    <input type="radio" checked>HTML（默认选中）
  </label>
  <label class="btn btn-default">
    <input type="radio">CSS
  </label>
  <label class="btn btn-default">
    <input type="radio">JS
  </label>
</div><br><br>


<h4>单按钮下拉菜单--btn-group</h4>
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    default
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">HTML</a></li>
    <li role="presentation"><a href="#">CSS</a></li>
    <li role="presentation"><a href="#">JavaScript</a></li>
  </ul>
</div>
<div class="btn-group">
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    primary
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">HTML</a></li>
    <li role="presentation"><a href="#">CSS</a></li>
    <li role="presentation"><a href="#">JavaScrpt</a></li>
  </ul>
</div>
<div class="btn-group">
  <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
    success
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">HTML</a></li>
    <li role="presentation"><a href="#">CSS</a></li>
    <li role="presentation"><a href="#">JavaScript</a></li>
  </ul>
</div>
<div class="btn-group">
  <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
    info
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">HTML</a></li>
    <li role="presentation"><a href="#">CSS</a></li>
    <li role="presentation"><a href="#">JavaScript</a></li>
  </ul>
</div>
<div class="btn-group">
  <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
    warning
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">HTML</a></li>
    <li role="presentation"><a href="#">CSS</a></li>
    <li role="presentation"><a href="#">JavaScript</a></li>
  </ul>
</div>
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
    danger
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">HTML</a></li>
    <li role="presentation"><a href="#">CSS</a></li>
    <li role="presentation"><a href="#">JavaScript</a></li>
  </ul>
</div>
<div style="height:100px"></div>


<h4>分裂式按钮下拉菜单--btn-group</h4>
<div class="btn-group">
  <button type="button" class="btn btn-default">默认</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">HTML</a></li>
    <li role="presentation"><a href="#">CSS</a></li>
    <li role="presentation"><a href="#">JavaScript</a></li>
  </ul>
</div>
<div style="height:100px"></div>


<h4>多种尺寸的按钮--btn-group</h4>
<div class="btn-group">
  <button type="button" class="btn btn-lg btn-default drop-toggle" data-toggle="dropdown">
    大号
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">HTML</a></li>
    <li role="presentation"><a href="#">CSS</a></li>
    <li role="presentation"><a href="#">JavaScript</a></li>
  </ul>
</div>
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    默认
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">HTML</a></li>
    <li role="presentation"><a href="#">CSS</a></li>
    <li role="presentation"><a href="#">JavaScript</a></li>
  </ul>
</div>
<div class="btn-group">
  <button type="button" class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown">
    小号
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">HTML</a></li>
    <li class="presentation"><a href="#">CSS</a></li>
    <li class="presentation"><a href="#">JavaScript</a></li>
  </ul>
</div>
<div class="btn-group">
  <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown">
    更小
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">HTML</a></li>
    <li role="presentation"><a href="#">CSS</a></li>
    <li role="presentation"><a href="#">JavaScript</a></li>
  </ul>
</div>
<div style="height:100px"></div>


<h4>向上弹出式菜单（dropup 使弹出菜单向上）--dropup</h4>
<div style="height:100px"></div>
<div class="btn-group dropup">
  <button type="button" class="btn btn-default dropdown-toggle" id="dropdownMenu" data-toggle="dropdown">
    defalut
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">HTML</a></li>
    <li class="presentation"><a href="#">CSS</a></li>
    <li class="presentation"><a href="#">JavaScript</a></li>
  </ul>
</div>
<br><br>

<h4>输入框-基本组合--input-group</h4>
<style>
  div{
    margin:5px;
  }
</style>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon">@</span>
  <input type="text" class="form-control" placeholder="用户名" aria-describedby="basic-addon">
</div>
<div class="input-group">
  <input type="text" class="form-control" placeholder="邮箱" aria-describedby="basic-addon">
  <span class="input-group-addon" id="basic-addon">@google.com</span>
</div>
<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" placeholder="金额" aria-label="Amount(to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>

<h4>输入框-尺寸--input-group-lg</h4>
<style>
  div{
    margin:5px;
  }
</style>
<div class="input-group input-group-lg">
  <span class="input-group-addon" id="basic-addon">@</span>
  <input type="text" class="form-control" placeholder="用户名" aria-describedby="basic-addon">
</div>
<div class="input-group input-group">
  <span class="input-group-addon" id="basic-addon">@</span>
  <input type="text" class="form-control" placeholder="用户名" aria-describedby="basic-addon">
</div>
<div class="input-group input-group-sm">
  <span class="input-group-addon" id="basic-addon">@</span>
  <input type="text" class="form-control" placeholder="用户名" aria-describedby="basic-addon">
</div>

<h4>复选框和单选框--input-group</h4>
<!-- style -->
<div class="input-group">
  <span class="input-group-addon"><input type="checkbox"></span>
  <input type="text" class="form-control">
</div>
<div class="input-group">
  <span class="input-group-addon"><input type="radio"></span>
  <input type="text" class="form-control">
</div>

<h4>搜索--input-group</h4>
<!-- style -->
<div class="input-group">
  <span class="input-group-btn"><button class="btn btn-default" type="button">搜索</button></span>
  <input type="text" class="form-control" placeholder="search">
</div>
<div class="input-group">
  <input type="text" class="form-control" placeholder="search">
  <span class="input-group-btn"><button class="btn btn-default" type="button">搜索</button></span>
</div>

<h4>搜索按钮整合下拉菜单--input-group-btn</h4>
<!-- style -->
<div class="input-group">
  <div class="input-group-btn">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">搜索<span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Google</a></li>
      <li class="divider">
      <li><a href="#">百度</a></li>
    </ul>
  </div>
  <input type="text" class="form-control">
</div>
<div class="input-group">
  <input type="text" class="form-control">
  <div class="input-group-btn">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">搜索<span class="caret"></span></button>
    <ul class="dropdown-menu dropdon-menu-right" role="menu">
      <li><a href="#">Google</a></li>
      <li class="divider">
      <li><a href="#">百度</a></li>
    </ul>
  </div>
</div>
<div style="height:120px"></div>

<h4>整合分裂式下拉菜单--input-group</h4>
<!-- style -->
<div class="input-group">
  <input type="text" class="form-control">
  <div class="input-group-btn">
    <button type="button" class="btn btn-default">提交</button>
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">HTML</a></li>
      <li role="presentation"><a href="#">CSS</a></li>
      <li role="presentation"><a href="#">JavaScript</a></li>
    </ul>
  </div>
</div>
<div style="height:120px"></div><br><br>

<h4>标签页--nav-tabs</h4>
<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">iOS</a></li>
  <li role="presentation"><a href="#">Android</a></li>
</ul><br>

<h4>胶囊式标签页--nav-pills</h4>
<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">iOS</a></li>
  <li role="presentation"><a href="#">Android</a></li>
</ul><br>

<h4>垂直胶囊式标签页--nav-pills--nav-stacked</h4>
<ul class="nav nav-pills nav-stacked" style="width:80px">
  <li role="presentation"><a href="#">iOS</a></li>
  <li role="presentation" class="active"><a href="#">Android</a></li>
</ul><br>

<h4>禁用标签页连接--nav-tabs</h4>
<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">iOS</a></li>
  <li role="presentation"><a href="#">Android</a></li>
  <li role="presentation" class="disabled"><a href="#">Window Phone</a></li>
</ul><br><br>

<h4>面包屑导航--breadcrumb</h4>
<!-- 不一定非要用 ol，div、ul 也可以 -->
<ol class="breadcrumb">
  <li><a href="#">Font</a></li>
  <li><a href="#">BootStrap</a></li>
  <li class="active">breadcrumb</li>
</ol><br><br>

<h4>基本分页--pagination</h4>
<nav>
  <ul class="pagination">
    <li><a href="#"><span>&laquo;</span></a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#"><span>&raquo;</span></a></li>
  </ul>
</nav><br>

<h4>禁用和激活状态--pagination</h4>
<nav>
  <ul class="pagination">
    <li><a href="#"><span>&laquo;</span></a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li class="disabled"><a href="#"><span>&raquo;</span></a></li>
  </ul>
</nav><br>

<h4>尺寸--pagination-lg</h4>
<nav>
  <ul class="pagination pagination-lg">
    <li><a href="#"><span>&laquo;</span></a></li>
    <li><a href="#">1</a></li>
    <li><a href="#"><span>&raquo;</span></a></li>
  </ul>
</nav>
<nva>
  <ul class="pagination">
    <li><a href="#"><span>&laquo;</span></a></li>
    <li><a href="#">a</a></li>
    <li><a href="#"><span>&raquo;</span></a></li>
  </ul>
</nav>
<nav>
  <ul class="pagination pagination-sm">
    <li><a href="#"><span>&laquo;</span></a></li>
    <li><a href="#">1</a></li>
    <li><a href="#"><span>&raquo;</span></a></li>
  </ul>
</nav><br><br>

<h4>翻页--pager</h4>
<nav>
  <ul class="pager">
    <li><a href="#">上一页</a></li>
    <li><a href="#">下一页</a></li>
  </ul>
</nav><br>

<h4>翻页两端对齐--pager</h4>
<nav>
  <ul class="pager">
    <li class="previous"><a href="#"><span>&larr;</span>上一页</a></li>
    <li class="next"><a href="#">下一页<span>&rarr;</span></a></li>
  </ul>
</nav><br>

<h4>禁用翻页--pager</h4>
<!-- 虽然有禁用图标，但是还是可以跳转，移除 a 标签的 href 属性就不会跳转，但是用 AJAX 异步就会出问题 -->
<nav>
  <ul class="pager">
    <li class="disabled"><a href="#">上一页</a></li>
    <li><a href="#">下一页</a></li>
  </ul>
</nav><br><br>

<h4>标签--label</h4>
<div style="heigth:10px"></div> <!-- 起到撑开元素间隔的效果 -->
<span class="label label-default">默认</span><br>

<h4>强调标签--label-primary</h4>
<div style="height:10px"></div>
<span class="label label-primary">强调</span><br>

<h4>成功标签--label-success</h4>
<div style="height:10px"></div>
<span class="label label-success">成功</span><br>

<h4>信息标签--label-info</h4>
<div style="height:10px"></div>
<span class="label label-info">信息</span><br>

<h4>警告标签--label-warning</h4>
<div style="height:10px"></div>
<span class="label label-warning">警告</span><br>

<h4>危险标签--label-danger</h4>
<div style="height:10px"></div>
<span class="label label-danger">危险</span><br><br>

<h4>超链接旁边的数字徽记--badge</h4>
<a href="#">新消息<span class="badge">23</span></a><br>

<h4>按钮中的数字徽记--btn-primary</h4>
<button class="btn btn-primary" type="button">
  未读消息<span class="badge">4</span>
</button><br><br>

<h4>超大屏幕显示--jumbotron</h4>
<div class="jumbotron">
  <div class="container" align="center">
    <h2 class="text-info" style="font-family:微软雅黑;font-weight:bold;font-size:49px">乎</h2><br>
    <div class="text-muted">世界</div><br>
    <p><a role="button" href="#" class="btn btn-success">注册</a></p>
  </div>
</div><br><br>

<h4>副标题--page-header</h4>
<div class="page-header">
  <h1>正标题<small>副标题</small><h1>
</div><br><br>

<h4>缩略图--container--thumbnail</h4>
<style>
  img{
    width:150px;
  }
</style>
<div class="container">
  <div class="row">
    <div class="col-xs-3">
      <a href="#" class="thumbnail"><img src="pictures/cat.jpg"></a>
    </div>
    <div class="col-xs-3">
      <a href="#" class="thumbnail"><img src="pictures/car.jpg"></a>
    </div>
    <div class="col-xs-3">
      <a href="#" class="thumbnail"><img src="pictures/doraemon.jpg"></a>
    </div>
  </div>
</div><br>

<h4>自定义内容--container</h4>
<style>
  img{
    width:150px;
  }
  div.col-xs-3{
    text-align:center;
  }
</style>
<div class="container">
  <div class="row">
    <div class="col-xs-3">
      <a href="#" class="thumbnail"><img src="pictures/car.jpg"></a>
      <div class="caption">
        <div class="text-muted">车</div><br>
        <p><a href="#" class="btn btn-primary" role="button">选中</a></p>
      </div>
    </div>
    <div class="col-xs-3">
      <a href="#" class="thumbnail"><img src="pictures/cat.jpg"></a>
      <div class="caption">
        <div class="text-muted">猫</div><br>
        <p><a href="#" class="btn btn-primary" role="button">选中</a></p>
      </div>
    </div>
    <div class="col-xs-3">
      <a href="#" class="thumbnail"><img src="pictures/doraemon.jpg"></a>
      <div class="caption">
        <div class="text-muted">蓝胖子</div><br>
        <p><a href="#" class="btn btn-primary" role="button">选中</a></p>
      </div>
    </div>
  </div>
</div><br><br>

<h4>警告框--alert</h4>
<div class="alert alert-success" role="alert">操作成功</div>
<div class="alert alert-info" role="alert">信息提示</div>
<div class="alert alert-warning" role="alert">警告提示</div>
<div class="alert alert-danger" role="alert">危险提示</div><br>

<h4>可关闭的警告框--alert</h4>
<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>警告提示
</div><br>

<h4>警告框中的链接--alert</h4>
<div class="alert alert-success" role="alert">
  <span>sale!!!</span><a href="#nowhere" class="alert-link">点击购买</a>
</div>
<div class="alert alert-info" role="alert">
  <span>sale!!!</span><a href="#nowhere" class="alert-link">点击购买</a>
</div>
<div class="alert alert-warning" role="alert">
  <span>sale!!!</span><a href="#nowhere" class="alert-link">点击购买</a>
</div>
<div class="alert alert-danger" role="alert">
  <span>sale!!!</span><a href="#nowhere" class="alert-link">点击购买</a>
</div><br><br>

<h4>基本进度条--progress-bar</h4>
<div class="progress">
  <div class="progress-bar" style="width:60%;"></div>
</div><br>

<h4>带数值的进度条--progress-bar</h4>
<div class="progress">
  <div class="progress-bar" style="width:60%;min-width:2em;">60%</div>
</div>
<div class="progress">
  <div class="progress-bar" style="width:0%;min-width:2em;">0%</div>
</div><br>

<h4>不同颜色的进度条--progress-bar</h4>
<div class="progress">
  <div class="progress-bar progress-bar-success" style="width:40%">40%</div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" style="width:60%">60%</div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" style="width:80%">80%</div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" style="width:100%">100%</div>
</div><br>

<h4>条纹--progress-bar-striped</h4>
<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" style="width:40%">40%</div>
</div><br>

<h4>发廊--progress-bar-striped</h4>
<div class="progress">
  <div class="progress-bar progress-bar-striped active" style="width:40%">40%</div>
</div><br>

<h4>堆叠--progress-striped</h4>
<div class="progress">
  <div class="progress-bar progress-bar-success" style="width:30%"></div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width:20%"></div>
  <div class="progress-bar progress-bar-danger" style="width:10%"></div>
</div><br><br>

<h4>基本列表--list-group-item</h4>
<ul class="list-group">
  <li class="list-group-item">HTML</li>
  <li class="list-group-item">CSS</li>
  <li class="list-group-item">JavaScript</li>
</ul><br>

<h4>徽记--list-group-item--badge</h4>
<ul class="list-group">
  <li class="list-group-item"><span class="badge">3</span>HTML</li>
  <li class="list-group-item"><span class="badge">33</span>CSS</li>
  <li class="list-group-item"><span class="badge">333</span>JavaScript</li>
</ul><br>

<h4>超链接--list-group-item</h4>
<div class="list-group">
  <a href="#" class="list-group-item active">HTML</a>
  <a href="#" class="list-group-item">CSS</a>
  <a href="#" class="list-group-item">JavaScript</a>
</div><br>

<h4>按钮--list-group-item</h4>
<div class="list-group">
  <button type="button" class="list-group-item active">HTML</button>
  <button type="button" class="list-group-item">CSS</button>
  <button type="button" class="list-group-item">JavaScript</button>
</div><br>

<h4>颜色--list-group-item</h4>
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-success">HTML</a>
  <a href="#" class="list-group-item list-group-item-info">CSS</a>
  <a href="#" class="list-group-item list-group-item-warning">JavaScript</a>
</div><br><br>

<h4>基本面板--panel</h4>
<div class="panel panel-default">
  <div class="panel-body">面板内容</div>
</div><br>

<h4>面板标题和内容--panel-heading--panel-body</h4>
<div class="panel panel-default">
  <div class="panel-heading">面板标题</div>
  <div class="panel-body">面板内容</div>
</div><br>

<h4>面板脚注--panel-footer</h4>
<div class="panel panel-default">
  <div class="panel-body">面板内容</div>
  <div class="panel-footer">面板脚注</div>
</div><br>

<h4>面板颜色--panel</h4>
<div class="panel panel-default">
  <div class="panel-heading">面板标题</div>
  <div class="panel-body">面板内容</div>
</div>
<div class="panel panel-success">
  <div class="panel-heading">面板标题</div>
  <div class="panel-body">面板内容</div>
</div>
<div class="panel panel-info">
  <div class="panel-heading">面板标题</div>
  <div class="panel-body">面板内容</div>
</div>
<div class="panel panel-warning">
  <div class="panel-heading">面板标题</div>
  <div class="panel-body">面板内容</div>
</div>
<div class="panel panel-danger">
  <div class="panel-heading">面板标题</div>
  <div class="panel-body">面板内容</div>
</div><br><br>

<h4>嵌入效果--well</h4>
<div class="well">文字呈现嵌入效果</div><br><br>

<h4>贴在顶部（不消失）--navbar-fixed-top</h4>
<style>
  body{
    padding-top:70px
  }
</style>
<nav class="navbar navbar-default navbar-fixed-top">
  <button class="btn btn-info">菜单</button>
  <button class="btn btn-success">菜单</button>
</nav>
<div style="white-space:pre">
  下拉滚动条才能看得见，菜单一直停留在顶部。
</div><br>

<h4>贴在顶部（会消失）--navbar-static-top</h4>
<nav class="navbar navbar-default navbar-static-top">
  <button class="btn btn-warning">菜单</button>
  <button class="btn btn-danger">菜单</button>
</nav>
<div style="white-space:pre">
  停留在顶部，会消失
</div><br>

<h4>贴在底部（不会消失）--navbar-fixed-bottom</h4>
<div style="white-space:pre">
  拉动内容，底部版权信息位置不变
</div>
<nav class="navbar navbar-default navbar-fixed-bottom">
  <div style="text-align:center">版权所有</div>
</nav><br><br>

<h4>静态模拟窗口--modal-dialog</h4>
<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <button data-dismiss="modal" class="close" type="button"><span aria-hidden="true">X</span><span class="sr-only">Close</span></button>
      <h4 class="modal-title">提问</h4>
    </div>
    <div class="modal-body">
      <p>问题描述</p>
      <textarea class="form-control"></textarea>
    </div>
    <div class="modal-footer">
      <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
      <button class="btn btn-primary" type="button">提交</button>
    </div>
  </div>
</div><br>

<h4>点击弹出--class="modal fade"</h4>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal0">提问（点击弹出模态窗口）</button>
<div class="modal fade" id="myModal0" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button data-dismiss="modal" class="close" type="button">
          <span aria-hidden="true">X</span><span class="sr-only">Close</span>
        </button>
        <h4 class="modal-title">提问</h4>
      </div>
      <div class="modal-body">
        <p>问题描述</p><textarea class="form-control"></textarea>
      </div>
      <div class="modal-footer">
        <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
        <button class="btn btn-primary" type="button">提交</button>
      </div>
    </div>
  </div>
</div>
<div style="height:200px"></div><br>

<h4>不要动画效果--class="modal"</h4>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal1">提问（点击弹出模态窗口）</button>
<div class="modal" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModelLabel">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button data-dismiss="modal" class="close" type="button">
          <span aria-hidden="true">X</span><span class="sr-only">Close</span>
        </button>
        <h4 class="modal-title">提问</h4>
      </div>
      <div class="modal-body">
        <p>问题描述</p><textarea class="form-control"></textarea>
      </div>
      <div class="modal-footer">
        <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
        <button class="btn btn-primary" type="button">提交</button>
      </div>
    </div>
  </div>
</div>
<div style="height:200px"></div><br>

<h4>点击空白不会收起--data-backdrop="static"</h4>
<p>data-backdrop="static"时，点击空白不会导致模态窗口关闭，data-backdrop="true"（默认）时，点击空白会导致模态窗口关闭</p>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal2">提问（点击弹出模态窗口）</button>
<div class="modal fade" id="myModal2" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="myModelLabel">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button data-dismiss="modal" class="close" type="button">
          <span aria-hidden="true">X</span><span class="sr-only">Close</span>
        </button>
        <h4 class="modal-title">提问</h4>
      </div>
      <div class="modal-body">
        <p>问题描述</p><textarea class="form-control"></textarea>
      </div>
      <div class="modal-footer">
        <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
        <button class="btn btn-primary" type="button">提交</button>
      </div>
    </div>
  </div>
</div>
<div style="height:200px"></div><br>

<h4>使用JS控制模态窗口--modal</h4>
<script>
  $(function(){
    $("#open").click(function(){
      $("#myModal3").modal('show');
    });
    $("#submit").click(function(){
      alert("信息已经提交");
      $("#myModal3").modal('hide');
    });
    $("#toggle").click(function(){
      $("#myModal3").modal('toggle');
    });
});
</script>
<button class="btn btn-default" id="open">打开模态窗口</button>
<button class="btn btn-default" id="close">关闭模态窗口</button>
<button class="btn btn-default" id="toggle">切换模态窗口</button>
<div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button data-dismiss="modal" class="close" type="button">
          <span aria-hidden="true">X</span><span class="sr-only">Close</span>
        </button>
        <h4 class="modal-title">提问</h4>
      </div>
      <div class="modal-body">
        <p>问题描述</p>
        <textarea class="form-control"></textarea>
      </div>
      <div class="modal-footer">
        <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
        <button class="btn btn-primary" id="submit" type="button">提交</button>
      </div>
    </div>
  </div>
</div>
<div style="height:200px"></div><br>

<h4>监听模态的变化</h4>
<p>button标签在里面加一个type=“button”是为了不使用提交功能</p>
<script>
  $(function(){
    $("#myModal4").on("show.bs.modal",function(){
      alert("开始显示模态窗口");
    });
    $("#myModal4").on("shown.bs.modal",function(){
      alert("显示模态窗口完毕");
    });
    $("#myModal4").on("hide.bs.modal",function(){
      alert("开始隐藏模态窗口");
    });
    $("#myModal4").on("hidden.bs.modal",function(){
      alert("隐藏模态窗口完毕");
    });
  });
</script>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal4">提问（点击弹出模态窗口）</button>
<div class="modal fade" id="myModal4" tabindex="-1" role="dialog" aria-labelledby="myModelLabel">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button data-dismiss="modal" class="close" type="button">
          <span aria-hidden="true">X</span><span class="sr-only">Close</span>
        </button>
        <h4 class="modal-title">提问</h4>
      </div>
      <div class="modal-body">
        <p>问题描述</p><textarea class="form-control"></textarea>
      </div>
      <div class="modal-footer">
        <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
        <button class="btn btn-primary" type="button">提交</button>
      </div>
    </div>
  </div>
</div>
<div style="height:200px"></div><br><br>

<h4>可切换导航栏--tab-pan--in active</h4>
<style>
  p{
    margin-left:10px;
    margin-top:10px;
  }
</style>
<ul id="myTab" class="nav nav-tabs">
  <li class="active"><a href="#dota" data-toggle="tab">Dota</a> </li>
  <li><a href="#lol" data-toggle="tab">LOL</a></li>
  <li class="dropdown">
    <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">其他<b class="caret"></b></a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
      <li><a href="#storm" tabindex="-1" data-toggle="tab">风暴英雄</a></li>
      <li><a href="#h300" tabindex="-1" data-toggle="tab">300英雄</a></li>
    </ul>
  </li>
</ul>
<div id="myTabContent" class="tab-content">
  <div class="tab-pane fade in active" id="dota">
    <p>《Dota》（Defense Of The Ancients）,守护古树、守护遗迹、远古遗迹守卫，由暴雪公司出品即时战略游戏《魔兽争霸3》的一款多人即时对战、自定义地图，可支持10个人同时连线游戏，暴雪公司官方认可的魔兽争霸 RPG 地图。</p>
  </div>
  <div class="tab-pane fade" id="lol">
    <p>《英雄联盟》（LOL）由美国 Riot Games 开发，中国大陆地区由腾讯运营的网络游戏。</p>
  </div>
  <div class="tab-pane fade" id="storm">
    <p>《风暴英雄》由暴雪娱乐公司开发的一款运行在 Windows 和 Mac OS 上的在线多人竞技 PC 游戏。</p>
    <p>游戏中的角色主要来自于暴雪三大经典游戏系列：《魔兽世界》、《暗黑破坏神》和《星际争霸》。是一款道具收费的游戏，与《星际争霸Ⅱ》基于同一引擎开发。</p>
  </div>
  <div class="tab-pane fade" id="h300">
    <p>《300英雄》由上海跳跃网络科技有限公司自主研发，深圳中青宝互动网络股份有限公司运营的一款类 DOTA 网游。游戏以7V7组队对抗玩法为主，提供永恒战场和永恒竞技场两种经典模式任由玩家选择，并创新性的加入了勇者斗恶龙、克隆战争等多种娱乐休闲玩法。</p>
  </div>
</div>
<div style="height:200px"></div><br><br>

<h4>非 Bootstrap 工具提示--title</h4>
<button class="btn btn-default" title="提示信息">非 BootStrap 工具提示</button><br>

<h4>左侧提示--data-placement</h4>
<button style="margin-left:100px" type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="左侧提示信息">鼠标悬停显示提示信息</button>
<script>
  $(function(){
    $("[data-toggle='tooltip']").tooltip();
  });
</script><br>

<h4>右侧提示--data-placement</h4>
<button style="margin-right:100px" type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="右侧提示信息">鼠标悬停显示提示信息</button>
<script>
  $(function(){
    $("[data-toggle='tooltip']").tooltip();
  });
</script><br>

<h4>上方提示--data-placement</h4>
<button style="margin-top:50px" type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="上方提示信息">鼠标悬停提示信息</button>
<script>
  $(function(){
    $("[data-toggle='tooltip']").tooltip();
  });
</script><br>

<h4>下方提示--data-placement</h4>
<button style="margin-buttom:50px" type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="下方提示信息">鼠标悬停提示信息</button>
<script>
  $(function(){
    $("[data-toggle='tooltip']").tooltip();
  });
</script><br><br>

<h4>基本折叠--well--无法正常展示，well.html可查看效果</h4>
<style>
  div.well{
    margin:10px;
  }
</style>
<a class="btn btn-info" role="button" data-toggle="collapse" href="#dota" aria-expanded="false" aria-controls="collapseExample">Dota</a>
<button class="btn btn-info" type="button" data-toggle="collapse" data-target="#lol" aria-expanded="false" aria-controls="collapseExample">LOL</button>
<div class="collapse" id="dota">
  <div class="well">
    《Dota》（Defense Of The Ancients），守护古树、守护遗迹、远古遗迹守卫，暴雪公司出品的即时战略游戏。
  </div>
</div>
<div class="collapse" id="lol">
  <div class="well">
    《英雄联盟》（LOL）。
  </div>
</div>
<div style="height:100px"></div><br>

<h4>面板折叠--panel</h4>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Dota</a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        《DotA》（Defense of the Ancients），可以译作守护古树、守护遗迹、远古遗迹守卫， 是由暴雪公司出品即时战略游戏《魔兽争霸3》的一款多人即时对战、自定义地图，可支持10个人同时连线游戏，是暴雪公司官方认可的魔兽争霸的RPG地图。
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordin" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">LOL</a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        《英雄联盟》（简称lol）是由美国Riot Games开发，中国大陆地区由腾讯游戏运营的网络游戏。
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">风暴英雄</a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        《风暴英雄》 是由暴雪娱乐公司开发的一款运行在Windows和Mac OS上的在线多人竞技PC游戏。
      </div>
    </div>
  </div>
</div><br><br>

<h4>基本轮播--carousel slide</h4>
<style>
  div.item img{
    width:100%;
  }
  div#carousel-example-generic{
    width:80%;
    margin:0 auto;
  }
</style>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
  </ol>
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="pictures/car.jpg">
    </div>
    <div class="item">
      <img src="pictures/cat.jpg">
    </div>
    <div class="item">
      <img src="pictures/doraemon.jpg">
    </div>
    <div class="item">
      <img src="pictures/waterfall.jpg">
    </div>
  </div>
</div><br>

<h4>带标题的轮播--carousel slide--carousel-inner</h4>
<style>
  div.item img{
    width:100%;
  }
  div#carousel-example-generic{
    width:80%;
    margin:0 auto;
  }
</style>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
  </ol>
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="pictures/car.jpg">
      <div class="carousel-caption">car</div>
    </div>
    <div class="item">
      <img src="pictures/cat.jpg">
      <div class="carousel-caption">cat</div>
    </div>
    <div class="item">
      <img src="pictures/doraemon.jpg">
      <div class="carousel-caption">doraemon</div>
    </div>
    <div class="item">
      <img src="pictures/waterfall.jpg">
      <div class="carousel-caption">waterfall</div>
    </div>
  </div>
</div><br>

<h4>设置轮播速度--data-interval</h4>
<style>
  div.item img{
    width:100%;
  }
  div#carousel-example-generic{
    width:80%;
    margin:0 auto;
  }
</style>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="5000">
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
  </ol>
  <div class="carousel-inner" role="listbox">
    <div class="item active"><img src="pictures/car.jpg"></div>
    <div class="item"><img src="pictures/cat.jpg"></div>
    <div class="item"><img src="pictures/doraemon.jpg"></div>
    <div class="item"><img src="pictures/waterfall.jpg"></div>
  </div>
</div><br>

<h4>控制前后的轮播--无法正常展示，well.html可查看效果</h4>
<style>
  div.item img{
    width:100%;
  }
  div#carousel-example-generic{
    width:80%;
    margin:0 auto;
  }
</style>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
  </ol>
  <div class="carousel-inner" role="listbox">
    <div class="item active"><img src="pictures/car.jpg"></div>
    <div class="item"><img src="pictures/cat.jpg"></div>
    <div class="item"><img src="pictures/doraemon.jpg"></div>
    <div class="item"><img src="pictures/waterfall.jpg"></div>
  </div>
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
  </a>
</div><br><br>
